import { Component } from '@angular/core';
import { NavController,NavParams } from 'ionic-angular';
import{Camera ,CameraOptions} from '@ionic-native/camera';
//import { MapPage } from '../mappage/mappage';

@Component({
  selector: 'take-photo',
  templateUrl: 'takephoto.html'
})
export class TakePhoto {
  tabBarElement: any;
  images:Array<{src:string}> 
  public profilePicture:any="../assets/images/welcomeBg.jpg";
  constructor(
    public navCtrl: NavController,
    public navaparms: NavParams,
    public Camera: Camera) {
    if (document.querySelector('.tabbar')) {
      this.tabBarElement = document.querySelector('.tabbar.show-tabbar');
    }

  }
  // goMessage() {
  //   console.log("jump");
  //   this.navCtrl.push('MessagePage');
  // }
  public Photo(): void {
    const options: CameraOptions = {
      quality: 100,                                            //相片质量0-100
      destinationType: this.Camera.DestinationType.DATA_URL,       //返回类型：DATA_URL= 0，返回作为 base64 編碼字串。 FILE_URI=1，返回影像档的 URI。NATIVE_URI=2，返回图像本机URI (例如，資產庫)
      sourceType: this.Camera.PictureSourceType.CAMERA,             //从哪里选择图片：PHOTOLIBRARY=0，相机拍照=1，SAVEDPHOTOALBUM=2。0和1其实都是本地图库
      allowEdit: false,                                        //在选择之前允许修改截图
      encodingType: this.Camera.EncodingType.JPEG,                   //保存的图片格式： JPEG = 0, PNG = 1
      targetWidth: 200,                                        //照片宽度
      targetHeight: 200,                                       //照片高度
      mediaType: this.Camera.MediaType.PICTURE,                                             //可选媒体类型：圖片=0，只允许选择图片將返回指定DestinationType的参数。 視頻格式=1，允许选择视频，最终返回 FILE_URI。ALLMEDIA= 2，允许所有媒体类型的选择。
      cameraDirection: 0,                                       //枪后摄像头类型：Back= 0,Front-facing = 1
      saveToPhotoAlbum: true
    }
    this.Camera.getPicture(options).then((imageData) => {
      let base64Image = 'data:image/jpeg;base64,' + imageData;
      this.profilePicture = base64Image;
      this.images.unshift({
        src: base64Image
      })
    }, (err) => {

    })
  }

  ionViewWillEnter() {
    if (this.tabBarElement) {
      this.tabBarElement.style.display = 'none';
    }
  }
  
  ionViewWillLeave() {
    if (this.tabBarElement) {
      this.tabBarElement.style.display = 'flex';
    }
  }
}
